<template>
	<view class="teacher page pd-30">
		<comHead  :datas="datasObj"></comHead>
		<view class="flex">
			<view class="popuItem pd-20 ft flex-center mr-20" v-for="(item, index) in checkList" :key="item.id"
				:class="{ active: tabSec === item.id }" @click="selctCheck(item.id)">
				{{ item.title }}
			</view>
		</view>
		<view class="teacherList mt-20">
			<view class="teach mb-20 pd-20" @click="toDetail(item.id)" v-for="item in teacherList" :key="item.id">
				<view class="flex">
					<view class="avtor flex-center">
						<image class="img" :src="item.avatar" mode="aspectFill"></image>
					</view>
					<view class="ml-20 desc">
						<view class="post flex-start">
							<view class="ft1  mr-12">{{ item.nickname_show }}</view>
							<image v-if="item.sex === '男'" class="image wh-24"
								src="https://cdn.oss.bon-top.cn/static_bc/images/boy.png"></image>
							<image v-else-if="item.sex === '女'" class="image wh-24"
								src="https://cdn.oss.bon-top.cn/static_bc/images/girl.png"></image>
						</view>
						<view class="ft c-99 mt-10">{{ item.service_time }}</view>

					</view>
				</view>
				<view class="mt-20 flex" v-if="item.area_show || item.place_show || item.constellation">
					<view class="tip mr-20 pd-12 flex" v-if="item.area_show">
						<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png"></image>
						<text class="ft ml-8">{{ item.area_show }}</text>
					</view>
					<view class="tip flex ft pd-12 mr-20" v-if="item.place_show">
						{{ "籍贯：" + item.place_show }}
					</view>
					<view v-if="item.constellation" class="tip flex pd-12 ft mr-20">
						{{ item.constellation }}
					</view>
				</view>
				<view class="kind flex mt-20 pd-20">
					<view class="item">
						<text class="ft mr-10">{{ "好评率" }}</text>
						<text class="ft-num ft-34">{{ item.good_percent + '%' }}</text>
					</view>
					<text class="line"
						style="display: inline-block;width: 2rpx;height: 28rpx;background-color: #F1F1F1;margin-left: 40rpx;margin-right: 40rpx;"></text>
					<view class="item">
						<text class="ft mr-10">{{ "咨询数" }}</text>
						<text class="ft-num ft-34">{{ item.consult_num }}</text>
					</view>
					<text class="line"
						style="display: inline-block;width: 2rpx;height: 28rpx;background-color: #F1F1F1;margin-left: 40rpx;margin-right: 40rpx;"></text>
					<view class="item">
						<text class="ft mr-10">{{ "点赞" }}</text>
						<text class="ft-num ft-34">{{ item.like_num }}</text>
					</view>
				</view>
				<view class="card pd-20" v-if="item.product_num > 0">
					<view class="ft">{{ "擅长项目 【" + item.product_type_show + "】: " + item.product_num }}</view>
					<view class="flex-start" style="width: 630rpx;" v-if="item.immigrate_list.length > 0">
						<view class="tab ft mr-10 mt-10" v-for="(tag, index) in item.immigrate_list" :key="index">
							{{ tag.name }}</view>
					</view>
					<view class="flex-start" style="width: 630rpx;" v-if="item.education_list.length > 0">
						<view class="tab1 ft mr-10 mt-10" v-for="(tag, index) in item.education_list" :key="index">
							{{ tag.name }}</view>

					</view>
				</view>
				<view class="card1 ft flex pd-20 mt-20" v-if="item.brand_info">
					{{ '所在企业：' + item.brand_info.name }}
				</view>
				<view class="card1 ft flex pd-20 mt-20" v-if="item.experience_show">
					{{ '从业经验：' + item.experience_show }}
				</view>
				<view class="flex-bwt btn_box" v-if="item.is_free == 1">
					<view></view>
					<view class="btn c-dbf ft flex-center">{{ item.is_official == 1 ? '咨询客服' : '预约咨询' }}</view>
				</view>
				<view class="flex-bwt btn_box" v-else>
					<view> <text class="ft">1次/￥</text><text class="ft-num ft-44">{{ item.price }}</text><text
							class="ft">元</text></view>
					<view class="btn c-dbf ft flex-center">预约咨询</view>
				</view>
			</view>
			<view class="com-empty" v-if="teacherList.length == 0">暂无数据</view>
		</view>
	</view>
</template>

<script setup lang="js">
import {
	onReachBottom
} from '@dcloudio/uni-app'
import {
	ref,
	onMounted,
	reactive
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '老师列表',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
})
const checkList = ref(
	[{
		id: 0,
		title: '全部'
	},
	{
		id: 1,
		title: '移民老师'
	},
	{
		id: 2,
		title: '教育老师'
	}
	]
)

const tabSec = ref(0)
const selctCheck = (id) => {
	tabSec.value = id
	teacherPage.value = 1
	teacherList.value = []
	teacherLoading.value = true
	getSaleListData()
}

//获取老师列表
const teacherPage = ref(1)
const teacherList = ref([])
const teacherLoading = ref(true)
const getSaleListData = () => {
	if (!teacherLoading.value) {
		return
	}
	uni.showLoading()
	teacherLoading.value = false
	utils
		.request(
			api.getSaleList, {
			page: teacherPage.value,
			pageSize: 5,
			type: tabSec.value
		},
			"get"
		)
		.then((res) => {
			teacherPage.value++
			if (res.data.items.length > 0) {
				teacherList.value = teacherList.value.concat(res.data.items)
			}
			if (teacherPage.value <= res.data.pageInfo.totalPage) {
				teacherLoading.value = true
			}
			uni.hideLoading()
		});
};
onMounted(() => {
	getSaleListData();
});
onReachBottom(() => {
	getSaleListData()
})
const toDetail = (id) => {
	uni.navigateTo({
		url: `/subpackage/teacher/teacherDetail?id=${id}`,
	})
}
</script>

<style lang="scss" scoped>
.btn {
	width: 136rpx;
	height: 58rpx;
	background: #333333;
	border-radius: 20rpx;
}

.popuItem {
	// width: 152rpx;
	height: 72rpx;
	background: #f1f1f1;
	border-radius: 20rpx;
}

.active {
	background: #dbf046;
}

.teacherList {
	.teach {
		width: 690rpx;
		// height: 778rpx;
		background: #f8f8f8;
		border-radius: 40rpx;

		.avtor {
			width: 100rpx;
			height: 100rpx;
			background: #ffffff;
			border: 2rpx solid #dbf046;
			border-radius: 50%;

			.img {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}
		}

		.desc {
			position: relative;
			// .post{
			//   position: relative;
			//   .image {
			//   position: absolute;
			//   top: -10rpx;
			//   left: 100rpx;
			// }
			// }

		}

		.tip {
			// width: 208rpx;
			height: 58rpx;
			background: #f1f1f1;
			border-radius: 20rpx;
		}

		.kind {
			width: 650rpx;
			background: linear-gradient(180deg,
					#ffffff 0%,
					rgba(255, 255, 255, 0) 100%);
			border-radius: 20rpx;
			gap: 3;

			.item {
				box-sizing: border-box;
			}

			.item:last-child {
				border: none;
			}
		}

		.card {
			width: 650rpx;
			background: #ffffff;
			border-radius: 20rpx;

			.tab {
				// width: 160rpx;
				box-sizing: border-box;
				padding-left: 20rpx;
				padding-right: 20rpx;
				padding-top: 12rpx;
				padding-bottom: 12rpx;
				background: #fbffdf;
				border-radius: 20rpx;
			}

			.tab1 {
				box-sizing: border-box;
				padding-left: 20rpx;
				padding-right: 20rpx;
				padding-top: 12rpx;
				padding-bottom: 12rpx;
				background: #ecfff6;
				border-radius: 20rpx;
			}
		}

		.card1 {
			width: 650rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}

		.btn_box {
			padding: 20rpx 20rpx 0;
		}
	}
}
</style>